<template>
  <view class="weather-container">
    <view class="current-weather">
      <view class="header">
        <view class="city">{{ city }}</view>
        <view class="date">{{ currentDate }}</view>
      </view>
      <view class="weather-main">
        <view class="temperature" :class="{ pulse: shouldPulse }">{{ weatherData.temperature }}°</view>
        <view class="weather-icon" :class="{ float: shouldFloat }">{{ weatherIcon }}</view>
      </view>
      <view class="weather-description">{{ weatherData.condition }}</view>
      <view class="details">
        <view class="detail-item">
          <view class="detail-icon">💧</view>
          <view class="detail-text">湿度: {{ weatherData.humidity }}%</view>
        </view>
        <view class="detail-item">
          <view class="detail-icon">🌬️</view>
          <view class="detail-text">风速: {{ weatherData.windSpeed }} km/h</view>
        </view>
      </view>
    </view>
    <view class="forecast">
      <view class="forecast-title">7天天气预报</view>
      <view v-for="(day, index) in forecast" :key="index" class="forecast-item">
        <text class="forecast-date">{{ day.week }}</text>
        <view class="forecast-icon">{{ day.icon }}</view>
        <text class="forecast-temp">{{ day.maxTemperature}}° ~ {{day.minTemperature}}°</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ApigetWeather, ApigetWeathers } from "../api/common.js";

// 获取当前日期
const currentDate = ref(new Date().toLocaleDateString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
}).replace(/\//g, '年').replace('年', '年').replace('月', '月') + '日');

const city = ref('');
const forecast = ref([]);
const shouldPulse = ref(false);
const shouldFloat = ref(false);

// 天气数据
const weatherData = reactive({
  temperature: 26,
  humidity: 61,
  windSpeed: 1,
  condition: '阴'
});

// 根据天气条件返回对应的图标
function getWeatherIcon(condition) {
  const icons = {
    '晴': '☀️',
    '多云': '🌤️',
    '阴': '☁️',
    '小雨': '🌦️',
    '中雨': '🌧️',
    '大雨': '🌧️',
    '暴雨': '🌧️',
    '雷阵雨': '⛈️',
    '小雪': '❄️',
    '中雪': '❄️',
    '大雪': '❄️',
    '雾': '🌫️',
    '霾': '🌫️'
  };
  
  // 将组合天气拆分为多个部分
  const conditions = condition.split('转');
  for (let cond of conditions) {
    cond = cond.trim();
    if (icons[cond]) {
      return icons[cond];
    }
  }
  
  // 如果没有匹配到组合天气中的任何一个部分，则返回默认图标
  return icons[conditions[0].trim()] || '🌈';
}

// 当前天气图标
const weatherIcon = computed(() => {
  return getWeatherIcon(weatherData.condition);
});

// 获取当前的天气
const getWeather = async () => {
  let res = await ApigetWeather();
  weatherData.temperature = res.currentTemperature;
  weatherData.humidity = res.humidity;
  weatherData.windSpeed = res.windForce;
  weatherData.condition = res.weatherCondition;
  city.value = res.cityName;
};

// 获取未来的天气数据并转换图标
const getALl = async () => {
  let res = await ApigetWeathers();
  forecast.value = res.map(day => {
    return {
      ...day,
      icon: getWeatherIcon(day.weatherCondition) // 将图标转换为对应的 emoji
    };
  });
};

onMounted(() => {
  getWeather();
  getALl();
  startAnimations();
});

const startAnimations = () => {
  setInterval(() => {
    shouldPulse.value = true;
    setTimeout(() => {
      shouldPulse.value = false;
    }, 1000);
  }, 3000);

  setInterval(() => {
    shouldFloat.value = true;
    setTimeout(() => {
      shouldFloat.value = false;
    }, 2000);
  }, 4000);
};
</script>

<style scoped>
.weather-container::-webkit-scrollbar {
  display: none;
}

.weather-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  height: 100vh;
}

.current-weather {
  background: linear-gradient(135deg, #6ab7ff, #4facfe);
  color: white;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
  transition: all 0.5s ease;
  opacity: 1;
}

.current-weather:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(79, 172, 254, 0.6);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.city {
  font-size: 28px;
  font-weight: bold;
}

.date {
  font-size: 14px;
  opacity: 0.8;
}

.weather-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.temperature {
  font-size: 64px;
  font-weight: bold;
  transition: transform 0.5s ease;
}

.temperature.pulse {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.weather-icon {
  font-size: 64px;
  transition: transform 0.5s ease;
}

.weather-icon.float {
  animation: float 2s infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.weather-description {
  font-size: 20px;
  margin-bottom: 20px;
}

.details {
  display: flex;
  justify-content: space-between;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-icon {
  font-size: 20px;
  margin-right: 8px;
}

.detail-text {
  font-size: 16px;
}

.forecast {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.forecast-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: transform 0.3s ease;
}

.forecast-item:hover {
  transform: translateY(-3px);
}

.forecast-item:last-child {
  border-bottom: none;
}

.forecast-date {
  font-size: 16px;
  color: #333;
}

.forecast-icon {
  font-size: 24px;
}

.forecast-temp {
  font-size: 16px;
  color: #666;
}
</style>